/* 页面基础布局
------------------------------- */
.container-page {
  padding: 10px 20px 20px;
  box-sizing: border-box;
  &-main {
    padding: 20px;
    background: #ffffff;
  }
}

.press-down {
  transition: 200ms, transform 300ms cubic-bezier(0.14, 1.02, 0.17, 0.03),
    backdrop-filter, -webkit-backdrop-filter 0ms;

  &:active {
    transform: scale(0.92);
    filter: opacity(0.6) !important;
  }
}

.n-spin {
  align-items: center;
  justify-content: center;
}

/* 文本行数限制
------------------------------- */
.u-line-1 {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.u-line-2 {
  -webkit-line-clamp: 2;
}

.u-line-3 {
  -webkit-line-clamp: 3;
}

.u-line-4 {
  -webkit-line-clamp: 4;
}

.u-line-5 {
  -webkit-line-clamp: 5;
}

.u-line-2,
.u-line-3,
.u-line-4,
.u-line-5 {
  overflow: hidden;
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box; // 弹性伸缩盒
  -webkit-box-orient: vertical; // 设置伸缩盒子元素排列方式
}

/* 鼠标悬浮样式
------------------------------- */
.hover-shadow {
  transition: transform 0.3s, -webkit-transform 0.3s;
  &:hover {
    //-webkit-transform: translateY(-3px);
    transform: translateY(-3px);
    -webkit-box-shadow: 0 3px 10px 1px rgb(33 33 33 / 8%);
    box-shadow: 0 3px 10px 1px rgb(33 33 33 / 8%);
  }
}

/* 字体大小全局样式
------------------------------- */
@for $i from 10 through 32 {
  .font#{$i} {
    font-size: #{$i}px !important;
  }
}

/* 外边距、内边距全局样式
------------------------------- */
@for $i from 1 through 35 {
  .mg#{$i} {
    margin: #{$i}px !important;
  }
  .mt#{$i} {
    margin-top: #{$i}px !important;
  }
  .mr#{$i} {
    margin-right: #{$i}px !important;
  }
  .mb#{$i} {
    margin-bottom: #{$i}px !important;
  }
  .ml#{$i} {
    margin-left: #{$i}px !important;
  }
  .pd#{$i} {
    padding: #{$i}px !important;
  }
  .pt#{$i} {
    padding-top: #{$i}px !important;
  }
  .pr#{$i} {
    padding-right: #{$i}px !important;
  }
  .pb#{$i} {
    padding-bottom: #{$i}px !important;
  }
  .pl#{$i} {
    padding-left: #{$i}px !important;
  }
}
/* 宽度百分比
------------------------------- */
.w100 {
  width: 100%;
}

/* flex布局
------------------------------- */
.flex {
  display: flex;
}
.items-center {
  align-items: center;
}
.align-center {
  align-items: center;
}
.justify-end {
  justify-content: flex-end;
}
.flex-between {
  justify-content: space-between;
}

.cursor-pointer {
  cursor: pointer;
}

.pagination {
  display: flex;
  justify-content: center;
}

.n-form.n-form--inline {
  flex-wrap: wrap;
}
